let path=require('path');
let webpack= require('webpack')
let HtmlWebpackPlugin=require('html-webpack-plugin');
let MiniCss=require('mini-css-extract-plugin');
let OptimizeCssAssetsPlugin=require('optimize-css-assets-webpack-plugin');
let UglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin');
let {CleanWebpackPlugin}=require('clean-webpack-plugin');// 自动清空build目录
let mode=process.env.NODE_ENV;

module.exports={
  mode: mode,//开发模式，有development和production两
  entry: './src/index.js',
  output: {
    filename: "bundle.[hash:8].js",
    path: path.resolve(__dirname,'build'),
    // publicPath: "https://drx.com"//公共路径
  },
  devtool: mode==="development"?"source-map":"",// 映射调试一般在测试环境中存在，生产环境要去掉了；
  module: {
    rules: [
      // {
      //   test: /\.js$/,
      //   use: {
      //     loader: "eslint-loader",// eslint 校验
      //     options: {
      //       enforce:'pre',// 强制在js解析前面执行前面
      //     }
      //   }
      // },
      {
        test:/\.png|jpg|gif$/,//编译js和css中的图片，但是html中的图片不可以；
        use: {
          loader: "file-loader",
          options: {//小于200 的时候打印base64；
            limit:200*1024,
            outputPath:'/img/',// 我们可以给图片添加统一的输出路径
            // publicPath:'https://drx.com'//设置cdn的时候可以用；
          }
        }
      },
      {
        test: /\.(jsx|js)$/,
        exclude:/node_modules/,
        include:path.resolve(__dirname,'src'),
        use: {
          loader: "babel-loader",
          options: {
            presets:[
              '@babel/preset-env',
              '@babel/preset-react',
            ],
            plugins:[
              ["@babel/plugin-proposal-decorators", { "legacy": true }],// 类
              ["@babel/plugin-proposal-class-properties", { "loose" : true }],// 装饰器
              "@babel/plugin-transform-runtime",// generator函数解析；
            ]
          }
        }
      },
      {
        test: /\.css$/,
        loader: [
          MiniCss.loader,//抽离css到link里面
          'css-loader',
          'postcss-loader',//目的是设置浏览器前缀；
        ]
      },
      {
        test: /\.less$/,
        loader: [
          MiniCss.loader,//抽离css到link里面
          'css-loader',
          'postcss-loader',//目的是设置浏览器前缀；
          'less-loader'
        ]
      },
    ]
  },
  /*watch: true,
  watchOptions: {
    poll: 1000,// 多长时间监控一次
    aggregateTimeout:500,// 防抖；
    ignored: 'node_modules'
  },*/
  plugins: [
    new HtmlWebpackPlugin({// 处理html 自动把html进行打包；
      template: "./src/index.html",
      filename: "index.html"
    }),
    new MiniCss({
      filename:'main.[hash:8].css'
    }),
    new CleanWebpackPlugin({}),
    new webpack.DefinePlugin({
      "DEV":JSON.stringify('eeeee')
    })
  ],
  optimization: {//优化
    minimizer: [
      new UglifyjsWebpackPlugin({
        cache:true,
        parallel:true,
        sourceMap:true
      }),
      new OptimizeCssAssetsPlugin()
    ]
  },
  // resolve: {// 设置路径的快捷
  //   extensions: ['js','less','css','json'],
  //   alias: {
  //     "css":""
  //   }
  // },
  devServer: {// express 服务器
    port:3000,
    progress:true,
    contentBase:'./build',//
    open:true,//自动打开浏览器
    // proxy:{// 跨域
    //   '/api':{
    //     target:"http://localhost:3000",
    //     pathRewrite:{
    //       '/api':''
    //     }
    //   }
    // }
  },

}